<template>
    <s-box class="style1" title="专家分布" ref="loading">
        <div class="chart-box">
            <div class="chart-wrap" ref="chart"></div>
        </div>
        <Modal
          class="modal-wrap"
          v-model="dialog"
          :title="modalName"
        >
          <div v-if="type=='author'">
            <a class="news-link-item" v-for="item in authorlist" @click="getInfoWindows2(item,1)" >
              <span>{{item.authorname}}</span>
            </a>
          </div>
          <div slot="footer">
            <Button  long  @click="ok">关闭</Button>
          </div>
        </Modal>
        <Modal
          class="modal-wrap"
          v-model="dialog2"
          :title="modalName2"
        >
          <div v-if="type=='author'">

            <div class="list-item">
              <div class="inline-block">
                <div class="label">专家名称</div>
                <div class="text">{{author.NAME}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">职称</div>
                <div class="text">{{author.title}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">邮件</div>
                <div class="text">{{author.email_list}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">发表文章数量</div>
                <div class="text">{{author.num_pubs}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">被引数量</div>
                <div class="text">{{author.num_citation}}</div>
              </div>
            </div>
            <div class="list-item">
              <div class="inline-block">
                <div class="label">研究方向</div>
                <div class="text">{{author.research_direction}}</div>
              </div>
            </div>
          </div>
          <div slot="footer">
            <Button  long  @click="ok2">关闭</Button>
          </div>
        </Modal>
    </s-box>
</template>
<script>
import delegate from '../js/event.js';
import echarts from "echarts";
import bmap from "echarts/dist/extension/bmap.js";
import chinaJson  from './map/china.json';
import worldJson  from './map/world.json';
import data4 from "./map.json";
import mixin from '../js/mixin.js';
export default {
    mixins:[mixin],
    data() {
        return {
          authorId:'',
          dialog:false,
          dialog2:false,
          modalName:'',
          modalName2:'',
          type:'',
          authorlist:[],
          author:{}
        }
    },
    mounted(){
        this._initMethod();
    },
    beforeDestroy(){
         // 解除事件绑定
         delegate.$off('s-resize',this._getMapData)
         delegate.$off('s-search',this._search)
    },
    methods: {
        _initMethod() {
            delegate.$on('s-search',this._search)
            delegate.$on('s-resize',this._getMapData)
        },
        _search(){

        },
        _getMapData(){
            this.$refs.loading.show();
            if(!this.navCurrentId) return;
            this.api({
                    url: "authoranalyse/technologyRegionalDistribution",
                    method: "post",
                    data:`topicId=${this.navCurrentId}`
            }).then(data => {
                this.$refs.loading.hide();
                let listMap = {};
                data.forEach( mapItem => {
                    if(mapItem.type == 0){
                       if(!listMap['新闻动态']) listMap['新闻动态'] = []
                       listMap['新闻动态'].push(mapItem);
                    }

                    if(mapItem.type == 1){
                        if(!listMap['论文']) listMap['论文'] = []
                        listMap['论文'].push(mapItem);
                    }

                    if(mapItem.type == 2){
                        if(!listMap['专利']) listMap['专利'] = []
                        listMap['专利'].push(mapItem);
                    }

                    if(mapItem.type == 3){
                        if(!listMap['机构']) listMap['机构'] = []
                        listMap['机构'].push(mapItem);
                    }

                    if(mapItem.type == 4){
                        if(!listMap['专家']) listMap['专家'] = []
                        listMap['专家'].push(mapItem);
                    }

                    if(!mapItem.type){
                        if(!listMap['其他']) listMap['其他'] = []
                        listMap['其他'].push(mapItem);
                    }
                });

                this.dataMap = listMap;

                this._initChart();
            }).catch((error) =>{ this.$refs.loading.hide()})
        },
        _initChart(){
          let $this = this;
          this.$nextTick(() => {
                if(!this.myChart) {
                  this.myChart = echarts.init(this.$refs.chart);
                  // 绑定点击事件
                  this.myChart.on('click', function (params) {
                    $this.getInfoWindows(params);
                  });
                }
                echarts.registerMap('china', chinaJson);
                echarts.registerMap('world', worldJson);

                var convertMapData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        let mapData = data[i]
                        let geoCoord = mapData.coordinate.split(',')
                        if (mapData.coordinate) {
                            res.push({
                                name: mapData.coname,
                                type: mapData.type,
                                value: geoCoord.concat(mapData.ctanum)
                            });
                        }
                    }
                    return res;
                };

                var convertMapColor = function(keyName) {

                    if(keyName == '新闻动态'){
                       return '#f59f00';
                    }

                    if(keyName == '论文'){
                       return '#f22612';
                    }

                    if(keyName == '专利'){
                       return '#b6026d';
                    }

                    if(keyName == '机构'){
                       return '#00ff00';
                    }

                    if(keyName == '专家'){
                       return '#b302c7';
                    }

                    if(keyName == '其他'){
                       return '#115b22';
                    }

                }

                let series = [];

                for(let keyName in this.dataMap){
                    let seriesItem = {
                            name: keyName,
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            data: convertMapData(this.dataMap[keyName]),
                            encode: {
                                value: 2
                            },
                            symbolSize: function (val) {
                                if(keyName == '机构'){
                                    return 20;
                                }else{
                                    let symbolsize = val[2]/10
                                    if(symbolsize < 15){
                                        symbolsize = 15
                                    }
                                    return symbolsize;
                                }
                            },
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: convertMapColor(keyName)
                                }
                            }
                    }
                    if(keyName == '机构'){
                        seriesItem.type = 'effectScatter';
                        seriesItem.label = {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            }
                        }
                        seriesItem.showEffectOn = 'render';
                        seriesItem.rippleEffect = {
                            brushType: 'stroke'
                        }
                        seriesItem.hoverAnimation = true

                    }

                    series.push(seriesItem)
                }

                let option = {
                    backgroundColor: 'transparent',
                    tooltip : {
                        trigger: 'item'
                    },
                    legend: {
                        textStyle:{
                            color:'#fff'
                        },
                        data:['新闻动态','论文','专利','机构','专家','其他']
                    },
                    geo: {
                        map: 'world',
                        center: [0, 29.71],
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#1d93ff',
                                borderColor: '#3bd3ff'
                            },
                            emphasis: {
                                areaColor: '#0452ba'
                            }
                        },
                        zoom:2
                    },
                    series : series
                };
                this.myChart.setOption(option);
            });
        },
        ok(){
          this.dialog = false;
        },
        ok2(){
          this.dialog2 = false;this.dialog = true;
        },
        getInfoWindows(parme){
          let name = parme.name;
          let coordinate = [...parme.value.slice(0,2)].join(',');
          //let type = parme.type; //类型 0代表新闻动态，1代表论文，2代表专利

          this.api({
            url: "authoranalyse/authorMapDetails",
            method: "post",
            data:`topicId=${this.navCurrentId}&coordinate=${coordinate}`
          }).then(data => {

            if(data && data.length == 0){
              this.$message({
                showClose: true,
                message: '暂无数据无法查看',
                type: 'error'
              });
            }else{
              this.dialog = true;
              this.modalName = name + '列表';
              this.type = 'author';
              this.authorlist = data;
            }

          });
        },
        getInfoWindows2(item,index) {
          if (index == 1) {
            this.modalName2 = '专家详情';
            this.api({
              url: "newtechanalyse/authorDetail",
              method: "post",
              data:`topicId=${this.navCurrentId}&authorId=${item.id}`
            }).then(data => {
              this.dialog = false;
              this.dialog2 = true;
              this.type = "author";
              this.author = data;
            })
          }

        }
    },
}
</script>
<style lang="scss" scoped>
  .chart-box{
      position: relative;
      padding-top: 43%;
  }
  .chart-wrap{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url(./map.png) repeat;
  }
</style>
